<template>
    <div>
        <div class="headf"><span @click="$router.go(-1)"></span>
            <div class="wenebn">
                <h6>{{currentItem.n}}</h6>
                <p class="">{{ Number(currentItem.p)/1000 }} {{ currentItem.zdp ? currentItem.zdp.toFixed(2) + '%' : '0.00%' }}</p>
            </div>
        </div>
        <div style="height:1.5rem">

        </div>
        <div class="goumais">
            <div class="xiaoge"><span><img
                        src="">数量</span>
                <div class="rtyh">
                    <div class="kunk"><input placeholder="请输入" v-model="buyNum"
                            @input="buyNum = buyNum.replace(/^(0+)|[^\d]+/g, '')" type="number"><a class="shou">手</a>
                    </div>
                </div>
            </div>
            <p class="shougu">1手=100股</p>
            <div class="xiaoge">
                <span class="eduleft"><img class="eduleftimg"
                        src="">可用额度</span>
                <div class="eduright">
                    <a class="ertyu">￥{{ userinfo.userAmt }}</a>
                </div>
            </div>
            <div class="rtyh">
                <!-- <div class="fangxi">
                    <a class="fanh" :class="buyType == 0 ? 'xuk' : ''" @click="buyType = 0">买涨</a>
                    <a class="fanh" :class="buyType == 1 ? 'xuk' : ''" @click="buyType = 1">买跌</a>
                </div> -->
            </div>
            <div class="xiaoge">
                <span class="eduleft"><img
                        src="">选择杠杆倍数</span>
                <div class="rtyh" @click="showPicker = true">
                    <div class="kunk">
                        <input placeholder="请选择" disabled="disabled" v-model="lever" class="canwei">
                        <img class="gangganicon"
                            src="">
                    </div>

                </div>
            </div>
            <div class="xiaoge">
                <span class="eduleft"><img
                        src="">支付金額</span>
                <div class="eduright"><a class="ertyu"> ￥{{ (currentItem.p/1000 * buyNum * 100).toFixed(2) }}</a>
                </div>
            </div>
            <!-- <div class="xiaoge">
                <span class="eduleft"><img
                        src="">手续费</span>
                <div class="eduright"><a class="ertyu">￥26600640.90</a></div>
            </div> -->
        </div>
        <div class="mail" @click="getbuyVipQc">买入</div>
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker :columns="siteLeverList" @cancel="showPicker = false" @confirm="onConfirm" show-toolbar />
        </van-popup>
    </div>
</template>
<script>
import * as api from '@/axios/api'
export default {
    components: {

    },
    props: {},
    data() {
        return {
            showPicker: false,
            currentItem: '',
            userinfo: '',
            settingdetail: '',
            siteLeverList: [],
            buyType: 0, // 0 买入 1 卖出
            buyNum: '', //买入数量
            lever: '', //杠杆倍数
        }
    },
    mounted() {
        this.currentItem = JSON.parse(decodeURIComponent(this.$route.query.item))
        console.log(this.currentItem)
        this.getUserInfo()
        this.getuserSetting()
    },
    methods: {
        onConfirm(item) {
            console.log(item)
            this.showPicker = false
            this.lever = item.value
        },
        async getuserSetting() {
            var opt = {};
            var data = await api.getSetting(opt);
            this.settingdetail = data.data;
            this.siteLever = this.settingdetail.siteLever.split("/")
            this.lever = this.siteLever[0];
            this.siteLeverList = [];
            for (let i = 0; i < this.siteLever.length; i++) {
                let val = this.siteLever[i];
                let item = {
                    text: val + "倍",
                    value: val
                };
                this.siteLeverList.push(item);
            }
            this.buyNum = this.settingdetail.buyMinNum / 100;
        },
        async getbuyVipQc() {
            if (this.buyNum * 100 < this.settingdetail.buyMinNum) {
                this.$message.error('交易数量不能小于' + this.settingdetail.buyMinNum / 100 + '手');
                return
            }
            if (this.buyNum * 100 > this.settingdetail.buyMaxNum) {
                this.$message.error('交易数量不能大于' + this.settingdetail.buyMaxNum / 100 + '手');
                return
            }
            var opt = {
                buyNum: this.buyNum * 100,
                stockCode: this.currentItem.c,
                lever: 1,
                buyType: 0,
            };
            var data = await api.buyVipQc(opt);
            if (data.status == 0) {
                this.$toast('下单成功');
                this.$router.push({
                    path: '/warehouse'
                })
            } else {
                this.$toast(data.msg);
            }
        },
        async getUserInfo() {
            // 获取用户信息
            let data = await api.getUserInfo();
            if (data.status === 0) {
                this.userinfo = data.data;
            }
        },
    },
}
</script>
<style lang="less" scoped>
/deep/ .van-picker__cancel{
    font-size: 0.4rem;
}
/deep/ .van-picker__confirm{
    font-size: 0.4rem;
}
/deep/ .van-picker__toolbar{
    height: 1.3rem;
}
/deep/ .van-picker-column{
    font-size: 0.4rem;
}
.headf {
    height: 1.17rem;
    position: fixed;
    background: linear-gradient(#517afa);
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #ececec;
    z-index: 33;

    span {
        position: absolute;
        width: 0.266rem;
        height: 0.45rem;
        background: url() no-repeat 50%;
        background-size: 100%;
        left: 0.4rem;
        top: 0.37rem;
    }

    .wenebn {
        text-align: center;
        width: 8rem;
        margin: 0 auto;

        h6 {
            color: #fff;
            font-size: .4rem;
            padding-top: 0.133rem;
            font-weight: 500;
        }

        p {
            font-size: .32rem;
            color: #fff;
            margin-top: 0.133rem;
        }
    }
}

.goumais {
    width: 9.21rem;
    margin: 0 auto;

    .xiaoge {
        margin-top: 10px;
        display: flex;
        height: 1.50rem;
        justify-content: space-between;
        align-items: center;
        margin: 5px 0;

        span {
            display: flex;
            align-items: center;
            color: #333;
            font-size: .43rem;
            line-height: 1.5rem;

            img {
                width: 0.43rem;
                height: 0.43rem;
                margin-right: 0.133rem;
            }
        }

        .rtyh {
            background-color: rgb(245, 245, 245);
            width: 4.75rem;
            border: 1px solid rgb(224, 224, 224);
            border-radius: 5px;
            display: flex;


            .kunk {
                border-radius: 0.08rem;
                display: flex;
                align-items: center;

                input {
                    color: #000;
                    font-size: .37rem;
                    background-color: rgb(245, 245, 245);
                    width: 4rem;
                    padding-left: 10px;
                    height: 1.07rem !important;
                }

                a {
                    color: #333;
                    font-size: .4rem;
                    line-height: 1.07rem;
                    margin-right: 0.266rem;
                }

                .gangganicon {
                    width: 0.26rem;
                    height: 0.24rem;
                }
            }
        }

        .eduleft {
            display: flex;
            align-items: center;

            .eduleftimg {
                width: 0.43rem;
                height: 0.43rem;
                margin-right: 0.13rem;
            }
        }

        .eduright {
            justify-content: space-between;
        }

        .ertyu {
            color: #333;
            font-size: .4rem;
            line-height: 1.5rem;
        }
    }

    .fangxi {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .4rem;
        text-align: center;
        margin-top: 20px;

        .fanh {
            width: 49%;
            height: 1.07rem;
            line-height: 1.07rem;
            border-radius: 5px;
            color: #999;
            border: 1px solid #e0e0e0;
        }

        .xuk {
            color: #fff;
            background: linear-gradient(#517afa);
            border: 1px solid #fff;
        }
    }
}

.shougu {
    color: rgb(153, 153, 153);
    text-align: right;
}

.mail {
    width: 9.21rem;
    height: 1.2rem;
    border-radius: 0.13rem;
    line-height: 1.2rem;
    margin: 0.8rem auto;
    color: #fff;
    font-size: .43rem;
    text-align: center;
    background: linear-gradient(#517afa);
}
</style>